<template>
  <section>
    <div v-if="$store.state.lang=='cn'">
      <el-carousel :interval="5000" arrow="always" :height="bannerH+'px'">
        <el-carousel-item v-for="(item ,index) in hdplist" :key="index">
          <div class="div_item">
            <img ref="imaHeight" :src="item.imgUrl">
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div v-else>
      <el-carousel :interval="5000" arrow="always" :height="bannerH+'px'">
        <el-carousel-item v-for="(item ,index) in enhdplist" :key="index">
          <div class="div_item">
            <img ref="imaHeight" :src="item.imgUrl">
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
  </section>
</template>
<script>
  export default {
    data() {
      return {
        bannerH: 450,
        hdplist: [{
            imgUrl: require("../assets/image/1.jpg")
          },
          {
            imgUrl: require("../assets/image/2.jpg")
          },
          {
            imgUrl: require("../assets/image/3.jpg")
          },
          {
            imgUrl: require("../assets/image/4.jpg")
          },
          {
            imgUrl: require("../assets/image/5.jpg")
          }
        ],
        enhdplist: [{
            imgUrl: require("../assets/image/en1.jpg")
          },
          {
            imgUrl: require("../assets/image/en2.jpg")
          },
          {
            imgUrl: require("../assets/image/en3.jpg")
          },
          {
            imgUrl: require("../assets/image/en4.jpg")
          },
          {
            imgUrl: require("../assets/image/en5.jpg")
          }
        ]
      };
    },
    methods: {
      setBannerH() {
        this.bannerH = document.body.clientWidth / 4
      }
    },
    mounted() {
      this.setBannerH()
      window.addEventListener('resize', () => {
        this.setBannerH()
      }, false)
    },
    props: {},
    components: {}
  };

</script>
<style scoped>
  .el-carousel__container {}

  .el-carousel__item {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;

    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
  }

  .div_item {
    text-align: center;
  }

  .div_item img {
    width: 100%;
    display: block;
  }

</style>
